<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<link rel="shortcut icon" href="//gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon">
<script type="text/javascript"
	src="<c:url value="/js/jquery-easyui-1.5.5.6/jquery.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/js/jquery-easyui-1.5.5.6/jquery.easyui.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/js/jquery-easyui-1.5.5.6/locale/easyui-lang-zh_CN.js"/>"></script>

<link rel="stylesheet"
	href="<c:url value="/js/jquery-easyui-1.5.5.6/themes/icon.css"/>" />
<link rel="stylesheet"
	href="<c:url value="/js/jquery-easyui-1.5.5.6/themes/default/easyui.css"/>" />


</head>

	
<body>
<style>
        *{
            margin: 0;
            padding: 0;
        }
        .a{
      			margin-top: 10px;
				width: 1142px;
				height: 100px;
				margin-left: 140px;
				border: 5px solid #EDF5FF;
			}
			.b{
				margin-left: 140px;
				margin-top: 10px;
				width: 650px;
				height: 470px;
				border: 5px solid #EDF5FF;
			}
			.c{
				width: 400px;
				height: 470px;
				border: 5px solid #EDF5FF;
				float: left;
				margin-top: -479px;
				margin-left: 880px;
			}
			.f{
				margin-left:50px;
				margin-top:50px;
			}
			.d{
				margin-top:10px;
				margin-left:420px;
			}
     body,div,p {
	font-family: 'Microsoft Yahei';
	font-size: 14px;
}
#clock {
  
  text-align: center;
  float:left;
  margin-left: 150px ;
  margin-top: 55px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: black;
  text-shadow: 0 0 20px , 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
  letter-spacing: 0.05em;
  font-size: 30px;
  padding: 5px 0;
}
#clock .date {
  letter-spacing: 0.1em;
  font-size: 17px;
}
#clock .text {
  letter-spacing: 0.1em;
  font-size: 12px;
  padding: 20px 0 0;
}



/*统计图  */
.circliful {
    position: relative; 
}

.circle-text, .circle-info, .circle-text-half, .circle-info-half {
    width: 100%;
    position: absolute;
    text-align: center;
    display: inline-block;
}

.circle-info, .circle-info-half {
	color: #999;
}

.circliful .fa {
	margin: -10px 3px 0 3px;
	position: relative;
	bottom: 4px;
}
		#myStat{
		
		left:160px;
		top:8px;
		}
		#myStat2{
		position: absolute;
		left:550px;
		top:182px;
		}
		#myStathalf2{
		position: absolute;
		left:550px;
		top:394px;
		}
		#myStathalf{
		left:160px;
		top:;
		}



/* 弹幕 */
.form-control{
		display: inline-block;
		width: 90px;
		padding: 6px 12px;
		font-size: 14px;
		line-height: 1.42857143;
		color: #555;
		background-color: #fff;
		background-image: none;
		border: 1px solid #ccc;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
		-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	}

	.btn{
		display: inline-block;
		padding: 6px 12px;
		margin-bottom: 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.42857143;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		-ms-touch-action: manipulation;
		touch-action: manipulation;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background-image: none;
		border: 1px solid transparent;
		border-radius: 4px;
	}

	.btn-primary {
		color: #fff;
		background-color: #337ab7;
		border-color: #2e6da4;
		margin-left:2px;
	}

	/*组件主样式*/
	.overflow-text{
		display: block;
		white-space:nowrap;
		overflow:hidden; 
		text-overflow:ellipsis;
		opacity:0;
		clear: both;
		padding:3px 10px;
		border-radius: 10px;
		box-sizing: border-box;
		max-width: 100%;
		color:#fff;
		animation:colorchange 3s infinite alternate;
		-webkit-animation:colorchange 3s infinite alternate; /*Safari and Chrome*/
	}
	@keyframes colorchange{
		0%{
			color:red;
		}
		50%{
			color:green;
		}
		100%{
			color:#6993f9;
		}
	}

    </style>

		<div class="a">
		
				<div id="clock">
				    <p class="date">{{ date }}</p>
				    <p class="time">{{ time }}</p>
				</div>
			<div class="d">
			 <iframe name="weather_inc" class="weather" src="http://i.tianqi.com/index.php?c=code&id=2&num=5"
				 width="650" height="70" frameborder="0" marginwidth="0" marginheight="0"  scrolling="no">
			</iframe>
			</div>
		</div>
		<div class="b">
			<div style="position: absolute;margin-left:30px;margin-top:30px;font-weight:bold;">离职原因统计</div>
			<div style="width:10px;height:10px;background:#61a9dc;position: absolute;margin-left:30px;margin-top:90px;"></div>
			<div style="position: absolute;margin-left:50px;margin-top:85px;">个人原因</div>
			
			<div style="width:10px;height:10px;background:#39D30A;position: absolute;margin-left:30px;margin-top:130px;"></div>
			<div style="position: absolute;margin-left:50px;margin-top:125px;">家庭原因</div>
			
			<div style="width:10px;height:10px;background:#D32D0A;position: absolute;margin-left:30px;margin-top:170px;"></div>
			<div style="position: absolute;margin-left:50px;margin-top:165px;">家庭原因</div>
			
			<div style="width:10px;height:10px;background:#A55974;position: absolute;margin-left:30px;margin-top:210px;"></div>
			<div style="position: absolute;margin-left:50px;margin-top:205px;">其它原因</div>

			<div id="myStat" data-dimension="220" data-text="${gryy}%" data-info="个人原因" data-width="30" data-fontsize="38" data-percent="${gryy}" data-fgcolor="#61a9dc" data-bgcolor="#eee"></div> 
			<div id="myStat2" data-dimension="220" data-text="${jtyy}%" data-info="家庭原因" data-width="30" data-fontsize="38" data-percent="${jtyy}" data-fgcolor="#39D30A" data-bgcolor="#eee"></div> 
			<div id="myStathalf" data-dimension="220" data-text="${gskc}%" data-info="公司开除" data-width="30" data-fontsize="38" data-percent="${gskc}" data-fgcolor="#D32D0A" data-bgcolor="#eee"></div>
			<div id="myStathalf2" data-dimension="220" data-text="${qtyy}%" data-info="其它原因" data-width="30" data-fontsize="38" data-percent="${qtyy}" data-fgcolor="#A55974" data-bgcolor="#eee"></div>  
			
		</div>
		<div class="c">

			<div >
				<img src="${zp}" style="width:200px;height:200px;margin-top:20px;margin-left:95px;border-radius:100px;"/>
			</div>
			 <div style="font-size:20px;margin-top:20px;margin-left:140px;">姓名：${name}</div> 
			 <div style="font-size:20px;margin-top:20px;margin-left:140px;">性别：${xb}</div> 
			 <div style="font-size:20px;margin-top:20px;margin-left:140px;">部门：${bm}</div> 
			 <div class="f">
			 <button id="stop" class="btn btn-primary">停止</button>
			 <button id="open" class="btn btn-primary">弹</button>
			 <input type="text" class="form-control" name="" id="barrage_content" placeholder="添加弹幕内容">
			 <button class="btn btn-primary" id="submit_barraget">发送</button>
			 </div>
		</div>
   		
   
   
   
<script type="text/javascript" src="<c:url value="/js/vue.min.js"/>"></script>	
<script src="<c:url value="/js/jquery.circliful.min.js"/>"></script>


<script type="text/javascript" src="<c:url value="/js/data.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/index.js"/>"></script>

<script>

$(function(){
	var clock = new Vue({
	    el: '#clock',
	    data: {
	        time: '',
	        date: ''
	    }
	});

	var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
	var timerID = setInterval(updateTime, 1000);
	updateTime();
	function updateTime() {
	    var cd = new Date();
	    clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
	    clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
	};

	function zeroPadding(num, digit) {
	    var zero = '';
	    for(var i = 0; i < digit; i++) {
	        zero += '0';
	    }
	    return (zero + num).slice(-digit);
	}

	    



	/* 统计图*/
	$( document ).ready(function() {
	        $('#myStathalf').circliful();
			$('#myStat').circliful();
			$('#myStathalf2').circliful();
			$('#myStat2').circliful();
	    });

	
	
	
	
	
	/* 弹幕 */

		// 数据初始化
		var Obj = $('body').barrage({
			data : data, //数据列表
			row : 7,   //显示行数
			time : 1000, //间隔时间
			gap : 20,    //每一个的间隙
			position : 'fixed', //绝对定位
			direction : 'bottom right', //方向
			ismoseoverclose : true, //悬浮是否停止
		})
		Obj.start(); 
		
		//添加评论
		$("#submit_barraget").click(function(){
		
			var val = $("#barrage_content").val();
			//此格式与dataa.js的数据格式必须一致
			var addVal = {
				href : '',
				text : val
			}
			//添加进数组
			Obj.data.unshift(addVal);
			$.messager.alert('提示', '评论成功');
			
			$('#barrage_content').val("");
			
			
		
		})
		
		$("#open").click(function(){
			Obj.start(); 
		})
		$("#stop").click(function(){
			Obj.close();
		})



});





</script>
    </div>
    <!--底部版权样式-->
    <div class="bottom"></div>
</body>

  
</body>
</html>